<template>
  <div class="printForm">
    <div class="area-header">
      <span class="area-header-title">{{ $t('物资明细') }}</span>
    </div>
    <table class="printTable">
      <tr>
        <td class="tit">{{ $t('流程标题') }}</td>
        <td colspan="3">{{ form.actTitle }}</td>
      </tr>
      <tr>
        <td class="tit">{{ $t('申请人') }}</td>
        <td>
          <UserSelect
            v-model="form.userId"
          />
        </td>
        <td class="tit">{{ $t('申请部门') }}</td>
        <td><DeptSelect v-model="form.deptId" :placeholder="$t('申请部门')" /></td>
      </tr>
      <tr>
        <td class="tit">{{ $t('申请时间') }}</td>
        <td colspan="3">{{ parseTime(form.applicationTime) }}</td>
      </tr>
      <tr>
        <td class="tit">{{ $t('物资去向') }}</td>
        <td colspan="3">{{ form.whereaboutsOfMaterials }}</td>
      </tr>
      <tr>
        <td class="tit">{{ $t('物资用途') }}</td>
        <td colspan="3">{{ form.useOfMaterials }}</td>
      </tr>

    </table>

    <div v-if="form.oaMaterialDetails && form.oaMaterialDetails.length > 0">
      <div class="area-header" style="margin-top:10px;">
        <span class="area-header-title">{{ $t('申请明细') }}</span>
      </div>
      <table class="previewTable">
        <thead>
          <th>{{ $t('物资名称') }}</th>
          <th>{{ $t('规格') }}</th>
          <th>{{ $t('备注') }}</th>
        </thead>
        <tbody>
          <tr v-for="(v, ind) in form.oaMaterialDetails" :key="ind">
            <td>{{ v.materialName }}</td>
            <td>{{ v.specifications }}</td>
            <td>{{ v.remark }}</td>
          </tr>
        </tbody>
      </table>

    </div>

    <!-- 附件列表 -->
    <FileView :list.sync="form.fileList" data-type="hr_demand" />

  </div>
</template>

<script>
import { getOaMaterial } from '@/api/oa/daily/material/oaMaterial'
import { getFdSubjectList } from '@/api/fd/config/getTypeMain'
export default {
  components: {
  },
  data() {
      return {
          // 表单参数
          form: {
            // 当前用户
            userId: undefined,
            // 附件列表
            fileList: [],
            oaExpenseList: []
          },
          // 费用类型
          getFdSubjectList: []
      }
  },
  created() {
    // 费用类型
    getFdSubjectList('expense').then(response => {
      this.getFdSubjectList = this.changeSubjectList(response.data)
    })
  },
  mounted() {
      this.$bus.$emit('async_done')
  },
  methods: {
    changeSubjectList(val) {
      const arr = []
      if (val.length !== 0) {
        val.forEach(item => {
          const obj = {}
          obj.value = item.value
          obj.label = this.$t(item.label)
        if (item.children && item.children.length > 0) {
            obj.children = this.changeSubjectList(item.children)
          }
          arr.push(obj)
        })
      }
      return arr
    },
    // 初始化数据
    init(data) {
      if (data != null && data !== '' && data.id !== undefined) {
        getOaMaterial(data.id).then(response => {
              this.form = response.data
          })
      } else {
        this.reset()
      }
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        userId: this.$store.state.user.userId,
        applyTime: new Date(),
        amountMoney: undefined,
        costsThat: undefined,
        actId: undefined,
        actStatus: '',
        remark: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined,
        payCompletionTime: undefined,
        delFlag: undefined,
        oaExpenseList: [],
        fileList: undefined,
        getFdSubjectList: []
      }
      this.resetForm('form')
    }

  }
}
</script>

